const { useState, useRef, useEffect } = React;
const { Button,  Col, Row, Card, Tabs } = antd;

const { TabPane } = Tabs;

const MonacoEditor = ({ init_doc, updateDoc }) => {
  const [editor, setEditor] = useState(null);
  const [html, setHtml] = useState('');

  useEffect(() => {

    const oncreate = (editor) => {
      print('editor created', editor)
      window.editor = editor
      setEditor(editor)
    }

    const dbchange = _.debounce((doc)=>{
      updateDoc(doc)
    }, 1500)

    const onchange = (doc) => {
      // print('doc change', doc)
      updateMd(doc)
      dbchange(doc)
    }

    let doc = init_doc
    let lang = 'markdown'
    const vspath = 'http://localhost:8787/monaco-editor/min/vs'
    $.initMonaco('container', vspath, doc, lang, oncreate, onchange)


  }, []);

  useEffect(() => {
    if (editor) {
      const dispose = editor.onDidChangeModelContent(() => {
        const doc = editor.getValue()
        //console.log('doc:', doc);
        updateMd(doc)
        updateDoc(doc)
      });

      return () => dispose.dispose();
    }
  }, [editor]);

  const updateMd = (doc) => {
      const htmlOutput = marked.parse(doc);
      setHtml(htmlOutput)
  }



  const onLangChange = v => {
    print('onLangChange ', v)
  }

  const onPreviewChange = v => {
    print('onPreviewChange ', v)

    setShowPreview(v)
  }


  const EdTab = ()=>{
    return (
      <Tabs defaultActiveKey="1">
        <TabPane tab="code" key="1">
              <div id="container" style={{ height: '600px', width: '100%' }} />
        </TabPane>
        <TabPane tab="preview" key="2">
              <LangDropdown OnChange={onLangChange}/>
              <div style={{width: '98%', height: '600px', overflow: 'auto'}} >
                <div id="toc"></div>
                <div dangerouslySetInnerHTML={{ __html: html }} />
              </div>      
        </TabPane>
      </Tabs>
    )
  }

  const LeftRight = () => {
    return (
      <Row>
          <Col span={12}>
            <Switch checkedChildren="预览" unCheckedChildren="关闭" defaultChecked size={"small"} onChange={onPreviewChange} />
            <div id="container" style={{ height: '600px', width: '100%' }} />
          </Col>
          <Col span={12}>
            <LangDropdown OnChange={onLangChange}/>
            <div style={{width: '98%', height: '600px', overflow: 'auto'}} >
              <div id="toc"></div>
              <div dangerouslySetInnerHTML={{ __html: html }} />
            </div>      
          </Col>
      </Row>
    )
  }

  return (
    <>
      <Tabs defaultActiveKey="1">
        <TabPane tab="code" key="1">
              <div id="container" style={{ height: '600px', width: '100%' }} />
        </TabPane>
        <TabPane tab="preview" key="2">
              <LangDropdown OnChange={onLangChange}/>
              <div style={{width: '98%', height: '600px', overflow: 'auto'}} >
                <div id="toc"></div>
                <div dangerouslySetInnerHTML={{ __html: html }} />
              </div>      
        </TabPane>
      </Tabs>
    </>
  );

};